<template>
  <div class="verify-phone">
    <h3>请输入验证码</h3>
    <div>
      <span>已发送至{{numFormat(phone)}}</span>
      <button @click.prevent="reSend" :disabled='isDisabled'>{{isDisabled?`${countdown}s`:"重新发送"}}</button>
    </div>
      <num-inputs v-model="mesVal"></num-inputs>
         <p class="tips" v-show="isErr">验证码错误</p>
  </div>
</template>
<script>
import numInputs from '../components/numInputs.vue'
import { updatePhone, sendCode, loginOut } from '../service/service.js'

export default {
  name: 'BindingVerify',
  components: {
    numInputs
  },
  data () {
    return {
      phone: '',
      value: '',
      isDisabled: true,
      mesVal: null,
      isErr: false,
      countdown: 60
    }
  },
  created () {
    this.phone = this.$route.params.phone
    this.handlerTimer()
  },
  watch: {

    mesVal (val) {
      console.log(val)
      if (val.length === 6) {
        this.perform()
      }
    }
  },
  methods: {
    handlerTimer () {
      this.countdown = 60
      this.isDisabled = true
      let timer = setInterval(() => {
        if (this.countdown === 0) {
          clearInterval(timer)
          timer = null
          this.isDisabled = false
        } else {
          this.countdown--
        }
      }, 1000)
    },
    reSend () {
      this.handlerTimer()
      sendCode({ phone: this.phone })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    perform () {
      updatePhone({ phone: this.phone, code: this.mesVal })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
          this.$toast(data.msg)
          // this.$router.push({ path: '/admin/myCenter' })
          //  退出接口
          loginOut()
            .then((res) => {
              const data = res.data
              if (data.ret !== 0) {
                this.$toast(data.msg)
                return false
              }
              // this.$toast(data.msg)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    numFormat (num) {
      return num && num.slice(0, 3) + '****' + num.slice(7)
    }
  }
}
</script>
<style lang="less" scoped>
.verify-phone {
  background: #fff;
  padding: 30px;

  > h3 {
    font-size: 16px;
    font-weight: 700;
  }
  > div:nth-child(2) {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    span {
      color: #999;
    }
     button {
      color: #2381f1;
      border: none;
      background: #fff;
    }
  }
}
.submit {
  margin-top: 120px;
  border-radius: 5px;
}
.tips{
  color: #ee0a24;
  margin-top: 5px;
}
</style>
